<template>
  <div class="profile">
    <div class="profile-info">
      <div class="title">我的档案</div>
      <div class="user-info">
          <img class="avater" src="@/assets/img/profile/avater.png" alt="">
          <div class="login">
            <p>登陆/注册</p>
            <p>暂无绑定手机号</p>
          </div>
      </div>
    </div>
    <div class="account">
      <div class="account-item">
        <span>0.00元</span>
        <span>我的余额</span>
      </div>
      <div class="account-item">
        <span>0个</span>
        <span>我的优惠</span>
      </div>
      <div class="account-item">
        <span>0分</span>
        <span>我的积分</span>
      </div>
    </div>
    <div class="person-info">
      <div class="person-item">
        <i class="iconfont icon-youjian"></i>
        <span>我的消息</span>
      </div>
      <div class="person-item">
        <i class="iconfont icon-jifenshangcheng"></i>
        <span>积分商城</span>
      </div>
      <div class="person-item">
        <i class="iconfont icon-huiyuanka"></i>
        <span>会员卡</span>
      </div>
      <div class="person-item">
        <i class="iconfont icon-che1"></i>
        <span>我的购物车</span>
      </div>
      <div class="person-item">
        <i class="iconfont icon-shoutibao"></i>
        <span>下载购物APP</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
name: "Profile"
}
</script>

<style scoped>
.profile-info {
  width: 100%;
  height: 150px;
  background-color: var(--color-tint);
  color: #fff;
}
.title {
  text-align: center;
  font-size: 20px;
  padding: 15px 0 20px
}
.user-info {
  display: flex;
  padding: 10px
}
.avater {
  margin-right: 10px;
  width: 60px;
  height: 60px;
}
.login {
  margin-top: 15px;
}
.login p:first-child {
  font-size: 16px;
}
.login p:last-child {
  margin-top: 5px;
  font-size: 12px;
}

.account {
  overflow: hidden;
  display: flex;
  height: 100px;
  padding: 5px;
  border-bottom: 20px solid #ececec;
}
.account-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #ccc;
}
.account-item:last-child {
  border-right: none;
}

.person-info {
  padding: 10px 0 0 10px
}
.person-item {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin-bottom: 10px;
}
.person-item i {
  color: var(--color-tint);
  margin-right: 10px;
  font-size: 18px;
}
</style>
